<script lang="tsx">
  import { defineComponent, PropType } from 'vue';
  import {
    Input,
    RadioGroup,
    Radio,
    FormItem,
    InputNumber,
    Cascader,
    Switch,
  } from '@arco-design/web-vue';
  import Upload from '../upload/index.vue';
  import isEmpty from 'lodash/isEmpty';
  type Keys =
    | 'login.img'
    | 'shop.order'
    | 'withdraw'
    | 'parking'
    | 'share.img'
    | 'integral';
  type LoginImg = {
    img: string;
  };
  type ShopOrder = {
    close: number;
    finish: number;
    refund: number;
  };
  export default defineComponent({
    props: {
      myKey: {
        type: String as PropType<Keys>,
        required: true,
      },
      query: {
        type: Object as PropType<LoginImg | ShopOrder>,
        required: true,
      },
    },
    emits: ['change'],
    setup(props, { emit, slots, expose }) {
      /**启动图 */
      const img = ref<any[]>([]);
      const detail = reactive({} as any);
      /**提现 */
      const isOpen = ref(false);
      watch(
        () => props.query,
        (n) => {
          console.log('🚀 ~ file: index.vue:41 ~ setup ~ n:', n);
          if (!isEmpty(n)) {
            console.log(n);
            Object.assign(detail, props.query);
          }
        },
        { deep: true }
      );
      expose({
        getVal: () => {
          if (props.myKey == 'withdraw') {
            detail.onOff = isOpen.value ? 1 : 0;
          }
          return detail;
        },
      });

      /**渲染启动图 */
      const renderStart = () => (
        <FormItem label="封面图">
          <Upload
            limit={1}
            list={img.value}
            onSuccess={(img) => (detail.img = img)}
            onRemove={() => (detail.img = '')}
          />
        </FormItem>
      );
      const renderIntegral = () => (
        <>
          <FormItem
            label="最小抵扣单位"
            tooltip="限制整数"
            labelColProps={{ span: 8 }}
          >
            <InputNumber
              placeholder="请输入"
              hideButton
              v-model={detail.unit}
            />
          </FormItem>
          <FormItem
            label="每单位可抵扣"
            tooltip="限制整数"
            labelColProps={{ span: 8 }}
          >
            <InputNumber
              placeholder="请输入"
              hideButton
              v-model={detail.money}
            />
          </FormItem>
        </>
      );
      /**渲染订单 */
      const renderOrder = () => (
        <>
          <FormItem label="未支付订单自动关闭" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.close}
              placeholder="未支付订单多少分钟自动关闭"
              hide-button
              v-slots={{
                suffix: () => <span>分钟</span>,
              }}
            />
          </FormItem>
          <FormItem label="订单自动确认收货" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.finish}
              placeholder="已发货订单多少天自动确认收货"
              hide-button
              v-slots={{
                suffix: () => <span>天</span>,
              }}
            />
          </FormItem>
          <FormItem label="订单自动关闭售后" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.refund}
              placeholder="已收货订单多少天关闭售后"
              hide-button
              v-slots={{
                suffix: () => <span>天</span>,
              }}
            />
          </FormItem>
          <FormItem label="送货上门费用" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.deliveryFee}
              placeholder="请输入送货上门费用"
              hide-button
            />
          </FormItem>
          <FormItem label="x公里内团长" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.sellerDistance1}
              placeholder="请输入x公里内团长"
              hide-button
            />
          </FormItem>
          <FormItem label="x公里内提货点" labelColProps={{ span: 8 }}>
            <InputNumber
              v-model={detail.sellerDistance2}
              placeholder="请输入x公里内提货点"
              hide-button
            />
          </FormItem>
        </>
      );
      /**渲染提现 */
      const renderWithdraw = () => (
        <>
          <FormItem label="是否开启">
            <Switch
              v-model={isOpen.value}
              v-slots={{
                unchecked: () => <>关闭</>,
                checked: () => <>开启</>,
              }}
            />
          </FormItem>
          <FormItem label="最低提现金额">
            <InputNumber v-model={detail.min} placeholder="请输入金额" />
          </FormItem>
          <FormItem label="最高提现金额">
            <InputNumber v-model={detail.max} placeholder="请输入金额" />
          </FormItem>
          <FormItem label="扣除比例">
            <InputNumber
              v-model={detail.subRatio}
              placeholder="请输入扣除比例"
            />
          </FormItem>
          {/* <FormItem label="扣除金额">
            <InputNumber
              v-model={detail.subMoney}
              placeholder="请输入扣除金额"
            />
          </FormItem> */}
        </>
      );
      const renderParking = () => (
        <>
          <FormItem label="appId">
            <Input v-model={detail.appid} placeholder="请输入appId" />
          </FormItem>
          <FormItem label="页面地址">
            <Input v-model={detail.path} placeholder="请输入页面地址" />
          </FormItem>
        </>
      );
      const renderShare = () => (
        <FormItem label="分享图片">
          <Upload limit={1} list={detail.img} v-model:value={detail.img} />
        </FormItem>
      );
      const renderDom = () => {
        switch (props.myKey) {
          case 'login.img':
            return renderStart();
          case 'shop.order':
            return renderOrder();
          case 'withdraw':
            return renderWithdraw();
          case 'parking':
            return renderParking();
          case 'share.img':
            return renderShare();
          case 'integral':
            return renderIntegral();
        }
      };
      return () => <>{renderDom()}</>;
    },
  });
</script>
